<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>easystar.js demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

  </head>
  <body>

        <div class="demo"></div>
        <div class = "container">
            <div class="demo-controls col-md-12 text-center panel panel-default">
                Iterations-Per-Calculation (asynchrony)<br>
                <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 25%;"></a>
                </div>
                <div class="check-container" id="check-tile-cost">
                    <label class="checkbox" for="checkbox1">
                        <input type="checkbox" value="" data-toggle="checkbox">
                        Prefer dry land
                    </label>
                </div><br>
                <div class="check-container" id="check-diagonals">
                    <label class="checkbox checked" for="checkbox2">
                        <span class="icons">
                            <span class="first-icon fui-checkbox-unchecked"></span>
                            <span class="second-icon fui-checkbox-checked"></span>
                        </span>
                        <input type="checkbox" checked="checked" value="" data-toggle="checkbox">
                        Use diagonals
                    </label>
                </div>          
            </div>
        </div>
    </div>



    <!-- Load JS here for greater good =============================-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="js/pixi.js"></script>
    <script type="text/javascript" src="js/async.js"></script>
    <script type="text/javascript" src="js/tweenjs.min.js"></script>
    <script type="text/javascript" src="js/easystar-0.4.4.min.js"></script>
    <script type="text/javascript" src="js/easy-star-demo.js"></script>
    <script>
        var easyStarDemo = new EasyStarDemo($('.demo').width(), $('.demo').height());
        window.onresize = function() {
            easyStarDemo.resize( $('.demo').width(), $('.demo').height());
        }

        //Component controls

        $('#check-tile-cost').click(function() {
            if ($('#check-tile-cost').bootstrapSwitch('status')) {
                easyStarDemo.unsetGrassPreference();
            } else {
                easyStarDemo.setGrassPreference();
            }
        });

        $('#check-diagonals').click(function() {
            if ($('#check-diagonals').bootstrapSwitch('status')) {
                easyStarDemo.disableDiagonals();
            } else {
                easyStarDemo.enableDiagonals();
            }
        });


        var $slider = $("#slider");
        if ($slider.length) {
            $slider.slider({
                min: 1,
                max: 4,
                value: 2,
                orientation: "horizontal",
                range: "min",
                change: function( event, ui ) {
                    easyStarDemo.setIterationsPerCalculation(Math.pow(ui.value,3));
                }
            });
        }
    </script>
  </body>
</html>
